<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-22 10:46:45
 * @FilePath: \wczd-mobile\src\pages\task\task-write.vue
-->
<template>
  <div>
    <evanForm class="evan-form" :label-style="{width:'200upx',paddingRight:'20upx'}" :model='taskInfo'>
      <evanFormItem label='任务时间' prop="danger_name">
        <div class="form-input" style="text-align: right;">{{taskInfo.taskStartTm}}<br> 至 {{taskInfo.taskEndTm}}</div>
      </evanFormItem>
      <evanFormItem label='任务名称'>
        <div class="form-input">{{taskInfo.taskName}}</div>
      </evanFormItem>
      <evanFormItem label='风险点' class="evan-bottom">
        <div class="form-input">{{formData.nodeName}}</div>
      </evanFormItem>
    </evanForm>
    
	<div v-if="isInspection!=='2'">
		<div class="evan-form" v-for="(citem,cindex) in formData.whInspectionTaskResDetailList" :key="cindex">
		  <div :style="{'background-color':citem.backgroundColor}" :class="`itemOrder${citem.itemOrder}`" class="inspection-content">
		    <div :style="{'color':citem.itemRes==='2'?'#F54A13':''}">{{citem.itemOrder}}.{{citem.itemName}}</div>
		    <div class="inspection-radio">
		      <div class="radio" @click="radioChange(citem,'1')">
		        <image class="radio-image" :src="(citem.itemRes==='1'?'../../static/qualified.png':'../../static/normal.png')"></image>
		        <span :style="{color:(citem.itemRes==='1'?'#009FDF':'#8D9093')}" class="radio-span">符合</span>
		      </div>
		      <div class="radio" @click="radioChange(citem,'2')">
		        <image class="radio-image" :src="(citem.itemRes==='2'?'../../static/unqualified.png':'../../static/normal.png')"></image>
		        <span :style="{color:(citem.itemRes==='2'?'#f54a13':'#8D9093')}" class="radio-span">不符合</span>
		      </div>
		    </div>
		    <div class="picture-block" v-if="citem.itemRes==='2'">
		      <div class="line-title">备注</div>
					<textarea maxlength="-1" auto-height="true" class="form-remark" placeholder="填写备注" v-model="citem.remark"></textarea>
		    </div>
		    <div class="picture-block" v-if="citem.itemRes==='2'">
		      <div class="line-title">现场照片</div>
		      <ImageUpload :remove="_remove" :_max="_max" @imageUrlCallBack='imageUrlCallBack' :imgUrlData='citem.fileUrlArr' :_type="'image'+citem.itemOrder"></ImageUpload>
		    </div>
		    <div class="picture-block" v-if="citem.itemRes==='2'">
		      <div class="line-title">视频</div>
		      <ImageUpload :remove="_remove" :_max="_max" :_mediaType="'video'" @imageUrlCallBack='imageUrlCallBack' :imgUrlData='citem.videoUrlArr' :_type="'video'+citem.itemOrder"></ImageUpload>
		    </div>
		  </div>
		</div>
	</div>
	<div v-else>
		<div class="evan-form" v-for="(citem,cindex) in formData.whInspectionTaskResDetailList" :key="cindex">
		  <div :style="{'background-color':citem.backgroundColor}" :class="`itemOrder${citem.itemOrder}`" class="inspection-content">
		    <div :style="{'color':citem.itemRes==='1'?'#17D46F':citem.itemRes==='2'?'#F54A13':''}">{{citem.itemOrder}}.{{citem.itemName}}{{citem.itemRes==='1'?'【符合】':citem.itemRes==='2'?'【不符合】':''}}</div>
		    <div class="picture-block" v-if="citem.itemRes==='2'">
                  <div class="line-title">备注</div>
                  <div class="line-content">{{citem.remark}}</div>
		    </div>
		    <div class="picture-block" v-if="citem.itemRes==='2'">
		      <div class="line-title">现场照片</div>
		      <ImageUpload :remove="_remove" :_max="_max" @imageUrlCallBack='imageUrlCallBack' :imgUrlData='citem.fileUrlArr' :_type="'image'+citem.itemOrder"></ImageUpload>
		    </div>
		    <div class="picture-block" v-if="citem.itemRes==='2'">
		      <div class="line-title">视频</div>
		      <ImageUpload :remove="_remove" :_max="_max" :_mediaType="'video'" @imageUrlCallBack='imageUrlCallBack' :imgUrlData='citem.videoUrlArr' :_type="'video'+citem.itemOrder"></ImageUpload>
		    </div>
		  </div>
		</div>
	</div>

    
    <div class="btn" v-if="formData.isInspection=='0'">
      <button type="primary" class="submit" @click="submit">提交</button>
    </div>
	<div id="mapDiv"></div>
  </div>
</template>

<script>
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import evanForm from '@/components/evan-form/evan-form.vue'
import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
import sxwhRadio from '@/pages/component/sxwh-radio/sxwh-radio.vue'
import { getWhInspectionTask, commitTaskNodeCheckInfo, getInspectionDetailByUniqueCode } from "@/api/task";
import ImageUpload from "@/pages/component/imageUpload/imageUpload.vue";
import taskInfo from "./task-info.vue";

export default {
  name: 'task-write',
  components: { secondTopPanel, evanForm, evanFormItem, ImageUpload, uniNumberBox, sxwhRadio,taskInfo },
	props: ['objUniqueCode','nodeId','taskId'],
  data () {
    return {
		tag: '',
		tagNav: [],
		radioValue: '',
		longitude: '',
		latitude: '',
		isInspection: '',
		formData: {
			id: null,
			isInspection: '0',
			taskId: null,
			roadId: null,
			nodeId: null,
			nodeName: null,
			objUniqueCode: null,
			whInspectionTaskResDetailList: [],
		},
		taskInfo: {
			taskStartTm: null,
			taskEndTm: null,
			taskName: null,
			nodeName: null,
		}
    }
  },
  created () {		
		if(this.taskId){
			this.tagNav = [{
				name: '隐患排查',
				value: '1'
			},{
				name: '点位信息',
				value: '2'
			}]
			this.tag = "1"
		}
		else{
			this.tagNav = [{
				name: '点位信息',
				value: '2'
			}]
			this.tag = "2"
		}
    this.getWhInspectionTask()
    this.getInspectionDetailByUniqueCode()
		setTimeout(()=>{
		  this.initMap()
		},100)
  },
	computed:{
		_remove(){
			return this.formData.isInspection!='2'
		},
		_max(){
			return this.formData.isInspection!='2'?9:0
		}
	},
  methods: {
		initMap(){
			let _this = this
			uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						_this.longitude = res.longitude
						_this.latitude = res.latitude
					}
			});
		},
    backClick(){
      uni.navigateBack()
    },
		changeTag(tag){
			this.tag = tag
		},
    //获取任务详情
    getWhInspectionTask () {
			if(this.taskId){
				getWhInspectionTask({ id: this.taskId }).then(res => {
				  this.taskInfo.taskStartTm = res.data.taskStartTm
				  this.taskInfo.taskEndTm = res.data.taskEndTm
				  this.taskInfo.taskName = res.data.taskName
				})
			}
    },
    //获取路径节点
    getInspectionDetailByUniqueCode () {
			if(!this.taskId){
				return;
			}
      getInspectionDetailByUniqueCode({ taskId: this.taskId, objUniqueCode: this.objUniqueCode }).then(res => {
        this.taskInfo.nodeName = res.inspectionRoadNode.nodeName
				this.isInspection = res.inspectionRoadNode.isInspection
        for (var d in this.formData) {
          if (res.inspectionTaskRes[d]) {
            this.formData[d] = res.inspectionTaskRes[d]
          }
        }
				this.formData.nodeName = res.inspectionRoadNode.nodeName
				let num = 0;
        for (let i = 0; i < res.inspectionTaskResDetail.length; i++) {
					res.inspectionTaskResDetail[i].itemOrder = ++num;
					res.inspectionTaskResDetail[i].backgroundColor = '';
					res.inspectionTaskResDetail[i].backgroundColor = '';
					res.inspectionTaskResDetail[i].remark = res.inspectionTaskResDetail[i].remark;
					res.inspectionTaskResDetail[i].fileUrlArr = JSON.parse(res.inspectionTaskResDetail[i].fileUrls || '[]')
					res.inspectionTaskResDetail[i].videoUrlArr = JSON.parse(res.inspectionTaskResDetail[i].videoUrls || '[]')
        }
				this.formData.whInspectionTaskResDetailList = res.inspectionTaskResDetail
      })
    },
    radioChange (item, itemRes) {
      item.itemRes = itemRes
      this.$forceUpdate()
    },
    imageUrlCallBack (fileList, type) {
      for (let i = 0; i < this.formData.whInspectionTaskResDetailList.length; i++) {
        if ('image' + this.formData.whInspectionTaskResDetailList[i].itemOrder === type) {
          this.formData.whInspectionTaskResDetailList[i].fileUrlArr = fileList
          this.formData.whInspectionTaskResDetailList[i].fileUrls = JSON.stringify(fileList)
        }
        if ('video' + this.formData.whInspectionTaskResDetailList[i].itemOrder === type) {
          this.formData.whInspectionTaskResDetailList[i].videoUrlArr = fileList
          this.formData.whInspectionTaskResDetailList[i].videoUrls = JSON.stringify(fileList)
        }
      }
    },
    getFileList (fileList, index) {
      for (let i = 0; i < this.formData.whInspectionTaskResDetailList.length; i++) {
        if (this.formData.whInspectionTaskResDetailList[i].index === index) {
          var list = []
          for (let j = 0; j < fileList.length; j++) {
            list.push({
              id: fileList[j].id,
              url: fileList[j].url,
              name: fileList[j].name
            })
          }
          this.formData.whInspectionTaskResDetailList[i].fileUrlArr = list;
          this.formData.whInspectionTaskResDetailList[i].fileUrls = JSON.stringify(list)
        }
      }
    },
    submit () {
      let ISsubmit = false
      this.formData.whInspectionTaskResDetailList.sort((a, b) => a.itemOrder - b.itemOrder)
      for (let index = 0; index < this.formData.whInspectionTaskResDetailList.length; index++) {
		this.formData.whInspectionTaskResDetailList[index].lng = this.longitude
		this.formData.whInspectionTaskResDetailList[index].lat = this.latitude
        const element = this.formData.whInspectionTaskResDetailList[index];	
        element.backgroundColor = ''
        if (!element.itemRes) {
          uni.showToast({
            title: `第${element.itemOrder}条未选择`,
            icon: 'none'
          })
          element.backgroundColor = 'rgba(246, 73, 18, 0.03)'
          uni.createSelectorQuery().select(`.itemOrder${element.itemOrder}`).boundingClientRect(data => {
            uni.createSelectorQuery().select(".evan-form").boundingClientRect((res) => {
              uni.pageScrollTo({
                duration: 0,
                //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
                scrollTop: data.top - res.top - 12
              })
            }).exec()
          }).exec();
          ISsubmit = false
          break
        } else if (index + 1 === this.formData.whInspectionTaskResDetailList.length) {
          ISsubmit = true
        }
      }
      if (ISsubmit) {
        uni.showLoading({
          title: '上报中'
        });
        commitTaskNodeCheckInfo(this.formData).then(res => {
          uni.hideLoading();
          if (res.code === 200) {
            uni.showToast({
              title: "操作成功",
              icon: 'none',
              duration: 2000
            });
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)
          }
        })
      }
    },
  },
}

</script>

<style scoped lang="scss">
.firstTopPanel{
  width: 100%;
  background: white;
  background-size: 100% 100%;
  .top-block{
    padding-top: 140upx;
    padding-bottom: 60upx;
    display: flex;
    padding-left: 50upx;
    align-items: center;

    .back-btn{
      width: 56upx;
      height: 56upx;
    }
    .title{
      padding-top: 0;
      padding-left: 15upx;
			font-size: 40upx;
			font-weight: bold;
    }
  }
}

.evan-form {
  border-radius: 8upx;
  padding: 20upx 30upx;
  .form-input {
    width: 100%;
    text-align: right;
    color: #777777;
  }
  .num-compute {
    /deep/.evan-form-item-container__main {
      justify-content: end !important;
    }
  }
}
/deep/.evan-bottom .evan-form-item-container {
  border: 0;
}
.factor-name {
  font-weight: 600;
  padding-bottom: 15upx;
  color: #000000;
}
.btn {
  margin: 40upx 0;
  display: flex;
  .submit {
    width: 40%;
    line-height: 80upx;
  }
  .temp-save {
    width: 40%;
    line-height: 80upx;
  }
}

/deep/.inspection-contentEmpty {
  background-color: rgba(246, 73, 18, 0.03);
  // background-color: #fff9f8;
}
/deep/.inspection-content {
  border-radius: 10upx;
  padding: 10upx;
  color: #777777;
  .inspection-radio {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: auto;
    border-top: 1upx solid #f1f1f1;
    padding-top: 20upx;
    padding-bottom: 30upx;
    margin-top: 10upx;
    display: flex;
    .radio {
      padding: 0 15upx;
      display: flex;
      .uni-radio-input {
        width: 36upx;
        height: 36upx;
      }
      .radio-image {
        width: 40upx;
        height: 40upx;
        margin-right: 10upx;
      }
    }
  }
}
.line-title {
  font-weight: 600;
  color: #000000;
  font-size: 28upx;
}
.form-remark{
	text-align: left;
	
	/deep/ .uni-textarea-wrapper{
		min-height: 40px;
	}
}
.ul-tag{
	display: flex;
	border-top: 1px solid #f5f5f5;
	.li-tag{
		flex: 1;
		text-align: center;
		padding: 10upx;
		background: white;
		
		&.active{
			background: #009fdf;
			color: white;
		}
	}
}
#mapDiv{
	width: 0;
	height: 0;
	opacity: 0;
}
.line-content{
	background: #f5f5f5;
	padding: 3upx 7upx;
}
</style>
